import { useRef, useState, useEffect, useCallback } from 'react'
import {  Row, Col, DatePicker, Flex, Input, Button, Space, Table, Form } from 'antd'
import useTable from '@/hooks/useTable'
import { useSearch } from '@/hooks/useSearch'
import { useTranslation } from 'react-i18next'
import { DATEFORMATE_TIME } from '@/config'
import WebIcon from '@/components/WebIcon'
import EditCarModal from './components/EditCarModal'
import { customerQueryPage } from '@/api/customer'
const { RangePicker } = DatePicker

const Costomer = () => {
  const { t } = useTranslation()
  const [showEdit, setShowEdit] = useState(false)
  const [tableDate, setTableData] = useState([])
  const [currentData, setCurrentData] = useState({})
  const FormSearch = useRef({})
  const { changeDate } = useSearch()
  const { headerRef, pageRef, tableScroll, pages, initPages, setTotal, total, loading, setLoading } = useTable()

  const formTimes = useRef({
    createTimeStart: '',
    createTimeEnd: ''
  })

  const changePicker = (val) => { // 日期选择器
    const dates = changeDate(val, DATEFORMATE_TIME)
    formTimes.current = {
      createTimeStart: dates[0],
      createTimeEnd: dates[1]
    }
  }
  const handleEdit = (items) => { // 编辑
    setCurrentData(items || null)
    setShowEdit(true)
  }
  const getTableData = useCallback(async () => {
    setLoading(true)
    const params = { ...FormSearch.current, ...pages.current }
    const res = await customerQueryPage(params)
    const list = res.data?.list.map(item => ({ ...item, key: item.customerId }))
    setTotal(res?.data?.total || 0)
    setTableData(list)
    setLoading(false)
  }, [pages, setTotal, setLoading])
  useEffect(() => {
    getTableData()
  }, [getTableData])
  const changePagination = (page, size) => {
    pages.current = {
      pageSize: size,
      pageNum: page
    }
    getTableData()
  }
  const handleSearch = (data = {}) => {
    if (data.warehouseTimes) delete data.warehouseTimes
    pages.current = initPages
    FormSearch.current = { ...data, ...formTimes.current }
    getTableData()
  }
  const columns = [
    {
      title: t('customer.customerId'),
      dataIndex: 'customerId',
      width: 100
    },
    {
      title: t('customer.companyName'),
      dataIndex: 'companyName',
    },
    {
      title: t('customer.companyAddress'),
      dataIndex: 'companyAddress',
      width: 140
    },
    {
      title: t('customer.customerName'),
      dataIndex: 'customerName'
    },
    {
      title: t('customer.customerPhone'),
      dataIndex: 'customerPhone',
    },
    {
      title: t('customer.customerEmail'),
      dataIndex: 'customerEmail',
    },
    {
      title: t('customer.insertTime'),
      dataIndex: 'insertTime',
    },
    {
      title: t('customer.createUserName'),
      dataIndex: 'createUserName',
    },
    {
      title: t('opr'),
      dataIndex: 'operation',
      fixed: 'right',
      width: 100,
      render: (_, record) => (
        <Space align='center' size={17}>
          <Button type="link" className='btn-F59' onClick={() => handleEdit(record)}>{t('edit')}</Button>
        </Space>
      )
    },
  ]
  return <Flex className='web-admin-page' vertical='vertical' ref={pageRef}>
    <header className='web-admin-page-header' ref={headerRef}>
      <Form
        layout="vertical"
        wrapperCol={{span: 12}}
        colon={false}
        onFinish={handleSearch}
      >
        <Row gutter={24}>
          <Col span={6} className='header-item'>
            <Form.Item name='warehouseTimes' label={t('customer.insertTime')}>
              <RangePicker className='header-item-input' onChange={changePicker} showTime/>
            </Form.Item>
          </Col>
          {/* <Col span={4} className='header-item'>
            <label>工地位置</label>
            <Select
              className='header-item-input'
              allowClear
              options={selectOption}
              placeholder='请选择工地位置'
              onChange={changeSelect}
            />
          </Col> */}
          <Col span={4} className='header-item'>
            <Form.Item name='companyName' label={t('customer.companyName')}>
              <Input className='header-item-input' placeholder={t('inputCompanyName')} allowClear />
            </Form.Item>
          </Col>
          <Col span={4} className='header-item'>
            <Form.Item name='customerName' label={t('customer.customerName')}>
              <Input className='header-item-input' placeholder={t('inputCustomerName')} allowClear />
            </Form.Item>
          </Col>
          <Col span={6} className='header-item'>
            <Space align="end" size={16} className='header-item-btns'>
              <Button icon={<WebIcon name='add-btn'/>} type="primary" htmlType="submit">{t('search')}</Button>
              <Button icon={<WebIcon name='search-btn'/>}  onClick={() => handleEdit()}>{t('add')}</Button>
            </Space>
          </Col>
        </Row>
      </Form>
    </header>
    <main className='web-admin-page-main'>
    {/* rowSelection={rowSelection} */}
      <Table className='web-admin-table' dataSource={tableDate} columns={columns} scroll={tableScroll} loading={loading} pagination={{
        onChange: changePagination,
        total,
        ...pages.current
      }}/>
    </main>
    <EditCarModal items={currentData} onOk={handleSearch} show={showEdit} onCancel={() => setShowEdit(false)}/>
  </Flex>
}
export default Costomer
